<template>
    <el-container style="height:100%">
        <el-aside class="side" width="182px">
            <img class="background" src="../../assets/home/background_side.png">
            <!-- 使用路由的方式激活选中菜单项，菜单项的index是路由的path -->
            <el-menu ref="sideMenu" :default-active="$route.path"
                     class="side-menu"
                     text-color="#ffffff64"
                     active-text-color="#ffffff"
                     background-color="#31478F"
                     router>
                <div class="accountInfo">
                    <img class="avatar" :src="userAvatar">
                    <div class="username">
                        {{userInfo.username}}
                        <img :src="statusImage" @click="$router.push('/applyForTitle')">
                    </div>
                </div>

               <template v-for="(item,index) in menuList">
                   <el-menu-item :index="item.key" @click="clickMenuItem(item.key)" v-if="!item.children" :key="index">
                       <i :class="item.icon"></i>
                       <span slot="title">{{item.name}}<img class="flag" src="../../assets/home/guangqi@2x.png"></span>
                   </el-menu-item>
                   <el-submenu :index="item.key" v-if="item.children" :key="index">
                       <template slot="title">
                           <i :class="item.icon"></i>
                           <span>{{item.name}}</span>
                       </template>
                       <el-menu-item v-for="(child,i) in item.children" :index="child.key"  :key="child.key">
                           <template v-if="showReviewsPersonnel">
                               <span v-if="i<1" slot="title">{{child.name}}<img class="flag" src="../../assets/home/guangqi@2x.png"></span>
                           </template>
                           <template v-else>
                               <span slot="title">{{child.name}}<img class="flag" src="../../assets/home/guangqi@2x.png"></span>
                           </template>
                       </el-menu-item>
                   </el-submenu>
               </template>
            </el-menu>

        </el-aside>
        <el-container class="container">
            <el-header class="header">
                <div class="title">
                    <img src="../../assets/home/title.png" style="height: 48px;">
                </div>
                <div class="logoff" @click="logout()"><img src="../../assets/logoff.png">退出</div>
            </el-header>
            <el-main>

                <keep-alive :include="['participationManagement','basicInformation']">
                    <router-view class="main"></router-view>
                </keep-alive>
            </el-main>
        </el-container>

    </el-container>

</template>

<script>
    import { getAuthoritiesListGet,repairData,applyForTitleFindResultPost} from '@/service/api'

    export default {
        data() {
            return {
                userInfo:{
                    username:""
                },
                statusImage:"",
                authoritiesList:[],
                menuList:[],
                menuData:[
                    //  注意：信息录入页面必须为第一个，因为当前页面 beforeRouteUpdate 方法中将菜单索引0作为逻辑执行依据 *********************************
                    {name:"信息录入",key:"/",icon:"iconfont iconxinxiluru1"}, //
                    // {name:"资料录入",key:"/dataEntry"},
                    {name:"数据总览",key:"/overview",icon:"iconfont iconshujuzonglan"},
                  //   {name:"个人首页",key:"/personalHomepage",icon:"iconfont icongerenshouye"},
                    {name:"信息查询",key:"/informationQuery",icon:"iconfont iconxinxichaxun"},
                    {name:"业绩预警",key:"/applyForTitle",icon:"iconfont iconshenqing"},
                    {name:"申请参评",key:"/reviewsApply",icon:"iconfont iconshenqing"},
                    {name:"业绩预警管理",key:"/participationManagement",icon:"iconfont iconrenyuanxinxi"},
                    {name:"人员职称表",key:"/staffTitles",icon:"iconfont iconzhichengxinxi"},
                    {name:"数据统计",key:"/dataQuery",icon:"iconfont iconzhichengxinxi"},
                    {name:"已评审人员",key:"/reviewed",icon:"iconfont iconyishenhe"},
                    {name:"待评审人员",key:"/pendingReviews",icon:"iconfont icondaishenhe"},
                    {name:"人员信息",key:"/personnelInfo",icon:"iconfont iconrenyuanxinxi"},
                    {name:"专家评审",key:"/expertNotice",icon:"iconfont iconrenyuanxinxi"},
                    {name:"权限设置",key:"/permissionSettings",icon:"iconfont iconquanxianshezhi"},
                    {name:"系统设置",key:"/settings",icon:"iconfont iconxitongshezhi"},
                    {name:"职称参评",key:"/reviewsPersonnel",icon:"iconfont icongerenshouye",children:[
                        {name:"参评人员",key:"/reviewsPersonnel"},
                        {name:"专家管理",key:"/expertManage"},
                        {name:"评审设置",key:"/reviewSetting"},
                        {name:"评审结果",key:"/reviewResults"},
                        ]},
                ],
                userAvatar:require("../../assets/home/avatar.png"),
                showReviewsPersonnel:false,
            }
        },
        mounted() {

            // 获取权限列表
            this.getAuthoritiesList();

            // 获取申请参评状态
            this.getUserStatus();

            // 监听页面跳转消息
            var that = this;
            window.addEventListener("message", function(event) {
                if (event.source == window && event.data.source && event.data.source == "message_type_page_jump") {
                    that.$router.push({name:event.data.data});
                }
            });

            // 判断浏览器
            var sUsrAg = navigator.userAgent;
            if(sUsrAg.indexOf("Chrome") > -1){
               // this.isChrome = true;
            }else{
               this.$alert('', '请使用谷歌浏览器打开本系统', {
                  confirmButtonText: '确定',
                  callback: action => {
                     that.logout();
                  }
               });
            }
        },
        methods: {
            // 点击菜单项
            clickMenuItem: function (pageName){
               this.$router.push(pageName);
            },
            // 退出登录
            logout: function () {
               // 从信息录入页面跳转至其它页面时，如果信息未保存，则提示用户保存
               if(this.$store.basicInformation_isSave === false){
                  this.$alert('您有信息尚未保存，请先保存一下吧！', '提示', {
                     confirmButtonText: '确定',
                     callback: action => {
                     }
                  });
                  return;
               }

               localStorage.removeItem('REVIEW-TOKEN');
               this.$router.replace("login");
            },
            // 获取菜单权限列表
            getAuthoritiesList(){
                getAuthoritiesListGet().then(res => {
                    if(res.code == 200){
                        this.userInfo.username = res.data.username;

                        for(var i=0;i<res.data.authorities.length;i++){
                            this.authoritiesList.push(res.data.authorities[i].name);
                            if(res.data.authorities[i].name == '信息录入'){
                                // this.handleRepairData()
                            }
                        }
                        for(i=0;i<this.menuData.length;i++){
                            if(this.authoritiesList.indexOf(this.menuData[i].name) != -1){
                                this.menuList.push(this.menuData[i])
                            }
                        }
                        // this.menuList.push(this.menuData[11])
                        if(res.data.userHeader !== undefined && res.data.userHeader.length > 0){
                            this.userAvatar = res.data.userHeader;
                            localStorage.setItem("userHeader",res.data.userHeader);
                        }else{
                            this.userAvatar = require("../../assets/home/avatar.png");
                        }
                        this.menuList.forEach(item=>{
                            if(item.name == '专家评审' && this.$router.history.current.path !== '/expertNotice'){
                                this.$router.replace('/expertNotice')
                            }
                        })
                        if(this.menuList.length == 1){
                            this.menuList.forEach(item=>{
                                if(item.name == '职称参评' && this.$router.history.current.path !== '/reviewsPersonnel'){
                                    this.$router.replace('/reviewsPersonnel')
                                }
                                if(item.name == '职称参评'){
                                    this.showReviewsPersonnel = true
                                }
                            })
                        }

                    }
                });
            },
            //数据修复
            handleRepairData(){
                repairData().then(res => {
                    if(res.code == 200){
                        console.log(res)
                    }
                });
            },
            // 获取参评状态
            getUserStatus(){

                applyForTitleFindResultPost().then(res => {
                    if(res.code == 200){

                        if(res.data.status == false){ // 未到"申请参评"时间
                            this.statusImage = "";
                            return;
                        }

                        if(res.data.record.firstCheckStatus == 1){ // 审核通过
                            this.statusImage = require("../../assets/home/状态_参评通过.png");
                        }else{
                            this.statusImage = require("../../assets/home/状态_参评未通过.png");
                        }
                    }
                });
            },
        },
         beforeRouteUpdate (to, from, next) {
            // 从信息录入页面跳转至其它页面时，如果信息未保存，则提示用户保存
            if(this.$store.basicInformation_isSave === false){
               this.$alert('您有信息尚未保存，请先保存一下吧！', '提示', {
                  confirmButtonText: '确定',
                  callback: action => {
                     this.$refs.sideMenu.$children[0].$el.focus();
                  }
               });
               this.$refs.sideMenu.$children[0].$el.click();
               return;
            }
            next();
         },
    }
</script>
<style scoped>

    .header {
        height: var(--top-navigation-height) !important;
        border-bottom: solid 1px #e6e6e6;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        background: #31478F;
        color: white;

        background-image: url(../../assets/home/beijing_shang@2x.png);
        /*background-size: 40% 100%; !* 背景图完整覆盖容器，但宽高比例变了，图片变形。*!*/
        background-repeat: no-repeat;
        background-position: right 20% bottom 15%;
    }

    .header .title {
        font-size: 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; /* 使用省略号来代表被修剪的文本 */
        display: flex;
        align-items: center;
    }

    .header .logoff{
        font-size: 15px;
        cursor: pointer;
        white-space: nowrap;
        display: flex;
        align-items: center;
    }
    .header .logoff>img{
        height: 14px;
        margin-right:2px;
    }

    .side {
        position: relative;
        height: 100%;
        background: #31478F;
        box-shadow: 3px 1px 12px 1px #02105d80;
        z-index: 1;

        /* 背景渐变色 */
        /* background: -webkit-linear-gradient(top, #4BC9FF, #3270F3);
        background: -o-linear-gradient(bottom, #4BC9FF, #3270F3);
        background: -moz-linear-gradient(bottom, #4BC9FF, #3270F3);
        background: linear-gradient(to bottom, #4BC9FF, #3270F3); */
    }

    .side > .background {
        position: absolute;
        bottom: 0px;
        right: 0px;
        left: 0px;
        width: 100%;
        height: 60%;
    }

    .side-menu {
        height: 100%;
        background: #ffffff00;
        color: white;
    }

    .side-menu .el-menu-item,
    .side-menu .el-submenu__title {
        font-size: 15px;
    }
    .side-menu .el-menu-item:hover,
    .side-menu .el-menu-item:focus {
        background-color: #3371F3;
    }

    .side-menu .el-menu-item i.iconfont,
    .side-menu .el-submenu__title i.iconfont {
        color: #ffffff60;
        margin-right: 10px;
        margin-left: 10px;
        width: 24px;
        text-align: center;
        font-size: 18px;
        vertical-align: middle;
    }

    .side-menu .el-menu-item.is-active i.iconfont {
        color: #ffffff;
    }
    .side-menu .el-menu-item .flag{
        display:none;
        margin-left: 10px;
        width: 14px;
        position: relative;
        bottom: 2px;
    }
    .side-menu .el-menu-item.is-active  .flag{
        display:inline-block;
    }

    .side-menu .accountInfo {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 30px;
    }

    .side-menu .accountInfo .avatar {
        width: 66px;
        height: 66px;
        border-radius: 50%;
        margin-top: 34px;
        margin-bottom: 13px;
        cursor: pointer;
    }

    .side-menu .accountInfo .username{
        display: flex;
        align-items: center;
        font-size: 16px;
        /*box-shadow: 3px 1px 12px 1px #02105d80;*/
    }
    .side-menu .accountInfo .username>img{
        height: 20px;
        cursor: pointer;
        margin-left: 2px;
        object-fit: cover;
    }
    .side >>> .el-menu{
        border: none;
    }

    .el-main {
        background: #F2F2F2;
        height: calc(100% - var(--top-navigation-height));
        position: relative;
    }

</style>
